<template>
    <div class="markdown-container">
        <div id="markdown" ref="boxRef">
        </div>
        <div class="bottom">
            <el-buttom type="primary" @click="commit">提交</el-buttom>
        </div>
    </div>
</template>

<script setup>
// npm i @toast-ui/editor   安装markdown插件
import MKEditor from '@toast-ui/editor'
import '@toast-ui/editor/dist/toastui-editor.css'
import '@toast-ui/editor/dist/i18n/zh-cn'
import {ref,onMounted,nextTick,defineEmits} from 'vue'

const boxRef = ref({})
let mkEditor;
const ininEditor = ()=>{
    mkEditor =  new MKEditor({
        el:boxRef.value,
        height:'500px',
        previewStyle:'vertical',
        language:'zh-CN',
    })
    mkEditor.getMarkdown()
}
onMounted(async ()=>{
    await nextTick()
    ininEditor()
})

const emit = defineEmits(['success'])

// 提交
const commit = ()=>{
    // console.log(mkEditor.preview.el.innerHTML);
    emit('success',mkEditor.preview.el.innerHTML)
}
</script>


<style lang="scss" scoped>
.markdown-container{
    .bottom{
        margin-top:20px;
        text-align:right;
    }
}
</style>